<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		.d1 {
			border: 1px solid black;
			text-align: center;
			width: 400px;
			height: 400px;
		}

		.d2 {
			background-color: green;
			width: 400px;
			height: 400px;
		}

		.d3 {
			background-color: red;
			width: 400px;
			height: 400px;
		}

		.p3 {
			background-color: green;
		}

		.p1,
		.p4 {
			border: 0px;
		}

		.p2 {
			background-color: red;
		}

		.p4 {
			display: none;
		}
	</style>
	<body>
		<div class="d1"><input type="button" class="p1" value="点击我div开始闪烁" />
			<input type="button" class="p4" value="点击我div停止闪烁" /></div>
		<script type="text/javascript">
			var sum = 0
			var blink = function() {
				sum++;
				if (sum % 2 == 0) {
					$('.d1').toggleClass("d2");
					$('.p4').toggleClass("p3");
				} else {
					$('.d1').toggleClass("d3");
					$('.p4').toggleClass("p2");
				}
			};
			$(document).ready(function() {
				$(".p1").click(function() {
					$(this).hide();
					$(".p4").show();
					var s = setInterval(blink, 100);
					$(".p4").click(function() {
						clearInterval(s);
						$(this).hide();
						$(".p1").show();
					})
				})

			});
		</script>
	</body>
</html>
